<template>
  <!-- 我的收藏 -->
  <div class="hot-category-wrapper">
    <p>分类 :</p>
    <ul>
      <li 
        :class="categoryIndex === index ? 'active' :''"
        v-for="(item,index) in categoryList" :key="index" 
        @click="categoryHandler(index,item)"
      >{{item}}</li>
      <!-- {{categoryList}} -->
    </ul>
  </div>
</template>

<script>
  export default {
    props:{
      categoryList:{
        type:Array,
        default:()=>{return [] },
      }
    },
    data () {
      return {
        categoryIndex:0,
      }
    },
    mounted() {
    },
    methods: {
      categoryHandler(index,name){
        this.categoryIndex = index;
        if(name === "全部"){
          name = String
        }
        console.log('name',name)
        this.$emit('sendCategory',name)
      }
    },
    computed: {
    },
    watch:{
    },
    beforeDestory() {
    }
  }
</script>

<style scoped>
 /* 分类 */
.hot-category-wrapper{
  display:flex;
  background-color: #383a43;
  width: 1440px;
  margin: 0 auto;
  padding:0 28px;
  box-sizing:border-box;
  padding-top:17px;
  border-radius:4px;
  color:#666666;
}
@media screen and (max-width:1440px){
  .hot-category-wrapper{
    width:1200px;
  }
}
.hot-category-wrapper p{
  width: 70px;
  white-space:nowrap;
  flex-shrink:0;
  margin-bottom:17px;
}
.hot-category-wrapper ul{
  display:flex;
  flex-wrap:wrap;
}
.hot-category-wrapper ul li{
  margin-right:40px;
  margin-bottom:17px;
  cursor:pointer;
  user-select: none;
  transition: all .2s ease;
}
.hot-category-wrapper ul li:hover{
  color:#ffffff;
  font-weight:500;
}
.hot-category-wrapper ul .active{
  color:#ffffff;
  font-weight:500;
}
</style>
